<template>
  <el-form ref="formRef" label-width="100px" :model="depFormDate" :rules="depFormRules">

    <el-form-item label="部门名称" prop="name">
      <el-input v-model.trim="depFormDate.name" />
    </el-form-item>

    <el-form-item label="部门编码" prop="code">
      <el-input v-model="depFormDate.code" />
    </el-form-item>

    <el-form-item label="部门负责人" prop="manager">
      <el-select key="1" v-model.trim="depFormDate.manager" placeholder="请选择">
        <el-option v-for="item in list" :key="item.id" :value="item.username" />
      </el-select>
    </el-form-item>

    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model.trim="depFormDate.introduce" />
    </el-form-item>

    <el-form-item style="text-align: center">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitD">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { userSimple, addDepartment, getDepartmentsInfo, updateDepartment } from '@/api/departments'
export default {
  name: '',
  props: {
    // 关闭弹窗函数
    closeDialog: {
      type: Function,
      required: true
    },
    // 刷新列表函数
    getDepartment: {
      type: Function,
      required: true
    },
    // 当前部门的id 新增子部门pid
    pid: {
      type: String,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    // 表单验证数组对象数据
    originList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 表单数据
      depFormDate: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      // 表单验证负责
      depFormRules: {
        code: [
          { required: true, message: '输入不能为空!', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { validator: this.validateDepCode, trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '输入不能为空!', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '输入不能为空!', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '输入不能为空!', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { validator: this.validateDepName, trigger: 'blur' }
        ]
      },
      // 员工列表
      list: []
    }
  },
  created() {
    //! 获取部门负责人列表
    this.getUserSimple()

    // 初始化获取部门详情
    if (this.isEdit) {
      // debugger
      this.getDepInfo()
    }
  },
  methods: {
    // ! 获取员工的列表
    async getUserSimple() {
      const res = await userSimple()
      // console.log(res)
      this.list = res.data
    },
    // ! 2.添加一个部门
    async addDep() {
      try {
        const res = await addDepartment({ ...this.depFormDate, pid: this.pid })
        this.$message.success(res.message)
        this.closeDialog() // 关闭弹窗
        this.getDepartment() // 刷新列表
      } catch (error) {
        // 如果参数错误之类的会返回到这里 在请求拦截器已经配置了false的属性也会抛出错误的promise
        this.$message.info(error.message)
      }
    },
    //! 3,修改一个部门信息
    async updateDep() {
      try {
        const res = await updateDepartment(this.depFormDate)
        this.$message.success(res.message)
        this.closeDialog() // 关闭弹窗
        this.getDepartment() // 刷新列表
      } catch (error) {
        // 如果参数错误之类的会返回到这里 在请求拦截器已经配置了false的属性也会抛出错误的promise
        this.$message.info(error.message)
      }
    },
    // ? 点击确认按钮 根据是否是编辑状态做相应的提交
    submitD() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.isEdit ? this.updateDep() : this.addDep()
        } else {
          this.$message.error('请完善信息再提交哦!')
        }
      })

      // if (this.isEdit) {
      //   this.updateDep()
      // } else {
      //   this.addDep()
      // }
    },

    //! 4.根据id获取当前部门详情
    async getDepInfo() {
      const res = await getDepartmentsInfo(this.pid)
      // console.log(res)
      this.depFormDate = res.data
    },

    // todo 表单验证 部门名字的方法 一个部门的子部门 名字不能重复
    validateDepName(rule, value, callback) {
      // 获取到当前部门下所有的下属部门
      let nameList = this.originList.filter(item => item.pid === this.pid).map(item => item.name)

      // ! 如果是编辑模式下 则不能和相同级别的部门同名
      if (this.isEdit) {
        // 根据当前部门的id 拿到 数据对象
        const curDep = this.originList.find(item => item.id === this.pid)
        const pid = curDep.pid
        // 当前部门的pid 和 其他部门pid相同 并且不包括自己
        nameList = this.originList.filter(item => item.pid === pid && item.id !== this.pid).map(item => item.name)
      }
      // console.log(nameList)
      if (nameList.includes(value)) {
        callback(new Error(`'${value}'此名称已经被占用了!`))
      } else {
        callback()
      }
    },
    // todo 表单验证 部门编号的方法 不能重复  子部门pid === 父部门id 则为相互归属
    validateDepCode(rule, value, callback) {
      // 获取已经使用的 code数组
      let codeList = this.originList.map(item => item.code)
      if (this.isEdit) {
        // 如果是编辑状态 则需要使用 排除自身的数据去验证
        codeList = this.originList.filter(item => item.id !== this.pid).map(item => item.code)
        // console.log(codeList)
      }
      // console.log(codeList)
      if (codeList.includes(value)) {
        callback(new Error(`'${value}'此编码已经被占用了!`))
      } else {
        callback()
      }
    }
  }
}
</script>

<style scoped>

</style>
